Vue.component('z-editor', {
    template: '<div></div>',
    props: ["value", "action", "disable"],
    data: function () {
    },
    mounted: function () {
        var thiz = this;
        var E = window.wangEditor;
        var editor = new E(this.$el);

        editor.customConfig.uploadFileName = "file";
        editor.customConfig.uploadImgServer = this.action;
        editor.customConfig.onchangeTimeout = 100;
        editor.customConfig.zindex = 200;

        editor.customConfig.onchange = function (html) {
            thiz.value = html;
            thiz.$emit("input", thiz.value);
        }

        setInterval(function () {
            thiz.$emit("input", thiz.value);
        }, 2000)

        editor.customConfig.uploadImgHooks = {
            customInsert: function (insertImg, result, editor) {
                if (result && result.data) {
                    var url = result.data[0]
                    if (url) {
                        insertImg(url)
                    }
                }
            }
        }

        editor.create()
        this.$watch('value', function (newValue, oldValue) {
            editor.txt.html(newValue)
        })
    }
})

Vue.component('z-upload', {
    template: '<el-upload  with-credentials="true"  :action="action" ref="element" :on-change="onChange"  list-type="picture"   :file-list="files" :on-success="uploadSuccess"> <el-button size="small" type="primary">点击上传</el-button></el-upload>',
    props: ["action", "img", "value"],
    data: function () {
        return {files: []}
    },
    methods: {
        uploadSuccess: function (data) {
            var file = (data.data && data.data[0]) ? data.data[0] : "";
            this.$emit('input', file)
        },
        onChange: function (files, fileList) {
            this.files = [files];
        },
        getFileDate: function () {
            if (this.value)
                this.files = [{name: "1", url: this.value}];
        }
    },
    created: function () {
        this.$watch('value', function (newValue, oldValue) {
            this.getFileDate()
        })
    }
})

Vue.component('z-select', {
    template: '<el-select v-model="value" placeholder="请选择"  ref="element"  filterable="true"  remote   :remote-method="remoteMethod"  @input="$emit(\'input\', value)"><el-option v-for="item in options" :key="item.id" :label="item[selectKey?selectKey:\'lab\']" :value="item[selectValue?selectValue:\'value\']"></el-option></el-select>',
    props: ["value", "dataUrl", "data", "selectKey", "selectValue"],

    data: function () {
        return {options: []}
    },

    methods: {
        getSelectDate: function () {
            var thiz = this;
            this.$http.get(this.dataUrl).then(function (value) {
                thiz.options = value.data.data.list ? value.data.data.list : value.data.data;
            })
        },
        remoteMethod: function (value) {
            var thiz = this;
            this.$http.get(this.dataUrl + value).then(function (value) {
                thiz.options = value.data.data.list ? value.data.data.list : value.data.data;
            })
        }
    },

    created: function () {
        if (this.dataUrl)
            this.getSelectDate();
        else {
            if (this.data) {
                //数据需要json格式化
                this.options = JSON.parse(this.data)
            }
        }
    }

})
